<div data-role="page">
    <div data-role="header">
        <a href="#" data-rel="back" class="ui-btn ui-icon-arrow-l ui-btn-icon-left ui-shadow">返回</a>
        <h1>选择多个图片</h1>
    </div>
    <div role="main" class="ui-content">
        <div data-role="collapsible">
            <h1>选择多个图片</h1>
            <button  onclick="getMedias()" class="ui-btn ui-btn-a">点击选择图片</button>
            <div id="imgInfo" width="100%"></div>
        </div>
        <div data-role="collapsible">
            <h1>选择一个视频</h1>
            <p>也可以选择多个视频，便于播放这里选择一个视频</p>
            <button  onclick="getMediasVod()" class="ui-btn ui-btn-a">点击选择视频</button>
            <div class='prism-player' id="vodId2">
                <div class="play-button" style="background: black; no-repeat center top; background-size:auto 100%;">
                    <img src="../img/play.png"  ng-click="playVod('vodId2')" />
                </div>
            </div>
        </div>
        <div data-role="collapsible">
            <h1>选择图片和视频</h1>
            <button  onclick="getMediasMix()" class="ui-btn ui-btn-a">点击选择图片</button>
            <div id="imgVideoInfo" width="100%"></div>
        </div>
        <div data-role="collapsible">
            <h1>缩略图查看</h1>
            <button  onclick="extractThumbnail()" class="ui-btn ui-btn-a">点击查看缩略图</button>
            <img id="thumbnailInfo" width="100%"></img>
        </div>
        <div data-role="collapsible">
            <h1>压缩图片</h1>
            <button  onclick="compressImage()" class="ui-btn ui-btn-a">点击压缩图片</button>
            <img id="compressInfo" width="100%"></img>
        </div>
        <div data-role="collapsible">
            <h1>调用相机拍照</h1>
            <button  onclick="takePhoto()" class="ui-btn ui-btn-a">点击打开相机拍照</button>
            <img id="takePhotoInfo" width="100%"></img>
        </div>
        <div data-role="collapsible">
            <h1>调用相机拍视频</h1>
            <button  onclick="takeVideo()" class="ui-btn ui-btn-a">点击打开相机拍照</button>
            <div class='prism-player' id="vodId1">
                <div class="play-button" style="background: black; no-repeat center top; background-size:auto 100%;">
                    <img src="../img/play.png"  ng-click="playVod('vodId1')" />
                </div>
            </div>
        </div>
        <div data-role="collapsible">
            <h1>查看图片属性</h1>
            <p>只能获取相册里面图片的相关属性，经过压缩后的无法获取，图片属性有，width,height,size等查看属性photoAccessHelper.PhotoKeys</p>
            <button  onclick="getImage()" class="ui-btn ui-btn-a">点击选择一个图片查看属性</button>
            <div id="imgOpt" width="100%"></div>
        </div>
    </div>
</div>